<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/less.js/3.13.0/less.min.js"><script> -->
  <link rel="stylesheet/less" type="text/css" href="index.less" />
  <!--引入less.min.js文件 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/less.js/3.13.0/less.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
  <div id="app">
    <div class="alipay">
      <label for="username">账户名 </label>
      <input id="username" type="text" v-model="msg" autocomplete="off" @keydown.up.prevent="charsetUp"
        @keyup.down="charsetDown" @keyup.enter="charsetEnter">
      <ul v-show="msg && dealEmali.length">
        <!-- 邮箱和内容都要动态处理 -->
        <li v-for="(item,index) in dealEmali" :class="cls[index]" :key="item" @click="charsetLi">{{dealMsg}}@{{item}}
          <template v-if="item == '189'">.cn</template><template v-else>.com</template>
        </li>
      </ul>
    </div>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        msg: '',
        email: ['qq', '163', '126', '189', 'hotmail', 'gmail', '21n', 'sina', 'sohu'],
        // cls: ['hover'],
        cls: [],
        // 当前选中的li
        num: -1
      },
      // 使用计算属性
      computed: {
        // 去除@符号以及后面的字母
        dealMsg() {
          let index = this.msg.indexOf('@');
          if (index >= 0) {
            return this.msg.slice(0, index)
          }
          return this.msg
        },
        // 处理邮箱
        dealEmali() {
          let index = this.msg.indexOf('@');
          if (index >= 0) {
            let str = this.msg.slice(index + 1);
            return this.email.filter(item => {
              item += item == '189' ? '.c' : '.co'
              return item.indexOf(str) === 0
            })
          }
          return this.email
        }
      },
      methods: {
        // 点击li选中li
        charsetLi(e) {
          let msg = e.target.innerHTML
          // 数据驱动视图
          this.msg = msg
        },
        charsetUp() {
          if (this.hasMore) {
            this.num--;
          }
          this.changeStyle()
          this.hasMore = true;
        },
        charsetDown() {
          //更改num
          this.num++;
          // 根据li的个数，以及num找到对应的li的索引
          this.changeStyle()
          this.hasMore = true;
          // 更改数据
        },
        charsetEnter() {
          let index = this.gitIndex()
          let msg = this.dealMsg + '@' + this.dealEmali[index] + (this.dealEmali[index] == '189' ? '.cn' : '.com')
          this.msg = msg
        },
        // 封装方法(改变样式)
        changeStyle() {
          let index = this.gitIndex();
          this.cls = [];
          this.cls[index] = 'hover'
        },
        // 封装方法(获取索引值)
        gitIndex() {
          // 总结方法：
          //1：取余(不论数多大，对10取余，结果是(-10,10之间，希望获取一个[0，10]之间的数))
          // let index = this.num % this.dealEmali.length;
          //2：加长度(在加上10，就是（0，20）)
          // index = index + this.dealEmali.length;
          //3：取余(继续对10取余就是[0,10])
          // index = index % this.dealEmali.length;
          //4：返回index
          // return index;
          //合并
          return (this.num % this.dealEmali.length + this.dealEmali.length) % this.dealEmali.length;
        }
      }
    })
  </script>
</body>

</html>